<template>
  <el-aside class="layout-aside">
    <div class="layout-home">
      <img class="layout-icon" src="/img/logo.png" @click="goHome" />
    </div>
    <el-menu
      active-text-color="#ffd04b"
      background-color="#545c64"
      text-color="#fff"
      @open="handleOpen"
      @close="handleClose"
    >
      <el-sub-menu
        v-for="(item, index) in routes"
        :key="item.path"
        :index="index"
      >
        <template #title>
          <div class="menu-title">{{ item.name }}</div>
        </template>
        <el-menu-item v-for="(menu, idx) in item.children" :index="menu.path">
          <RouterLink class="route-item" :to="menu.path">{{
            menu.name
          }}</RouterLink>
        </el-menu-item>
      </el-sub-menu>
    </el-menu>
  </el-aside>
</template>

<script setup>
import { routes } from "@/router/route/index";
import { useRoute, useRouter } from "vue-router";
const router = useRouter();

const goHome = () => {
  router.push({ path: "/home" });
};
</script>

<style lang="scss" scoped>
::v-deep {
  .el-menu {
    width: 100%;
    border-right: 0;
  }

  .el-sub-menu__title {
    padding: 0 !important;
  }
}

.menu-title {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
}

.route-item {
  width: 100%;
  display: flex;
  justify-content: center;
  text-decoration: none;
  color: #fff;
}

.route-item.router-link-active {
  color: #ffd04b;
}
.layout-aside {
  width: 150px;

  .layout-home {
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 0;

    .layout-icon {
      width: 80px;
      height: 80px;
      cursor: pointer;
    }
  }
}
</style>
